<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作台 - ToolsAPI</title>
    <link rel="icon" type="image/x-icon" href="img/ik.ico">
    
    <!-- Bootstrap 5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- 小米风格样式 -->
    <link href="css/xiaomi-style.css" rel="stylesheet">
</head>
<body class="xiaomi-theme">
    <div id="header"></div>
    
    <!-- 主容器 -->
    <div class="xiaomi-admin-container">
        <div id="sidebar"></div>

        <!-- 主内容区域 -->
        <main class="xiaomi-main-content">
            <!-- 工作台面板 -->
            <div class="content-section active">
                <!-- 概览卡片 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="xiaomi-page-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h2 class="page-title">
                                        <i class="fas fa-tachometer-alt me-2"></i>
                                        工作台
                                    </h2>
                                    <p class="page-subtitle">ToolsAPI - Maoge</p>
                                </div>
                                <button class="btn btn-outline-primary btn-sm" onclick="dashboardManager.refreshData()" title="刷新数据">
                                    <i class="fas fa-sync-alt me-1"></i>
                                    刷新
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计卡片 -->
                <div class="row mb-4">
                    <div class="col-lg-3 col-md-6 mb-3">
                        <div class="xiaomi-stat-card orange">
                            <div class="stat-icon">
                                <i class="fas fa-file-upload"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">1,247</div>
                                <div class="stat-label">今日上传</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <div class="xiaomi-stat-card blue">
                            <div class="stat-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">892</div>
                                <div class="stat-label">今日转换</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <div class="xiaomi-stat-card green">
                            <div class="stat-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">98.5%</div>
                                <div class="stat-label">成功率</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <div class="xiaomi-stat-card red">
                            <div class="stat-icon">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-number">13</div>
                                <div class="stat-label">待处理错误</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作区 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="xiaomi-card">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <i class="fas fa-bolt me-2"></i>
                                    快速操作
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <div class="quick-action-card" onclick="window.location.href='data-processing.html'">
                                            <div class="action-icon">
                                                <i class="fas fa-cogs"></i>
                                            </div>
                                            <div class="action-content">
                                                <h6>数据处理</h6>
                                                <p>一站式数据上传、转换和下载</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <div class="quick-action-card" onclick="window.location.href='templates.html'">
                                            <div class="action-icon">
                                                <i class="fas fa-download"></i>
                                            </div>
                                            <div class="action-content">
                                                <h6>下载模板</h6>
                                                <p>获取最新的数据模板</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <div class="quick-action-card" onclick="window.location.href='history.html'">
                                            <div class="action-icon">
                                                <i class="fas fa-history"></i>
                                            </div>
                                            <div class="action-content">
                                                <h6>查看历史</h6>
                                                <p>查看转换历史记录</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动 -->
                <div class="row">
                    <div class="col-lg-8 mb-4">
                        <div class="xiaomi-card">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <i class="fas fa-chart-line me-2"></i>
                                    转换趋势
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-placeholder">
                                    <canvas id="conversionChart" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-4">
                        <div class="xiaomi-card">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <i class="fas fa-bell me-2"></i>
                                    最近活动
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="activity-list">
                                    <div class="activity-item">
                                        <div class="activity-icon success">
                                            <i class="fas fa-check"></i>
                                        </div>
                                        <div class="activity-content">
                                            <div class="activity-title">PH1数据转换完成</div>
                                            <div class="activity-time">2分钟前</div>
                                        </div>
                                    </div>
                                    <div class="activity-item">
                                        <div class="activity-icon info">
                                            <i class="fas fa-upload"></i>
                                        </div>
                                        <div class="activity-content">
                                            <div class="activity-title">新文件上传</div>
                                            <div class="activity-time">5分钟前</div>
                                        </div>
                                    </div>
                                    <div class="activity-item">
                                        <div class="activity-icon success">
                                            <i class="fas fa-check"></i>
                                        </div>
                                        <div class="activity-content">
                                            <div class="activity-title">数据转换完成</div>
                                            <div class="activity-time">10分钟前</div>
                                        </div>
                                    </div>
                                    <div class="activity-item">
                                        <div class="activity-icon success">
                                            <i class="fas fa-download"></i>
                                        </div>
                                        <div class="activity-content">
                                            <div class="activity-title">结果文件下载</div>
                                            <div class="activity-time">15分钟前</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Scripts -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    <script src="js/layout-loader.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>